<template>
    <div>
        <div>
            <el-card>
                <el-row :gutter="20">
                    <el-col :span="2" v-show="showButton">
                        <el-button icon="el-icon-plus" size="mini" type="primary" @click="handleAdd">新增
                        </el-button>
                    </el-col>
                </el-row>
                <br/>
                <el-row :gutter="20">
                    <el-col :span="6" v-if="showTreatId">
                        <el-input size="mini" clearable v-model="queryInfo.treatId" placeholder="请输入要查询的患者治疗编号"
                                  @change="handleQuery"></el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-date-picker size="mini" type="date" placeholder="选择日期" v-model="queryInfo.time"
                                        value-format="yyyy-MM-dd"
                                        style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col :span="6">
                        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">查询</el-button>
                        <el-button icon="el-icon-refresh" size="mini" type="info" @click="resetQuery">重置</el-button>
                    </el-col>
                </el-row>
                <el-table :data="tableData" stripe size="mini" class="log_table">
                    <el-table-column label="治疗编号" prop="id" width="180"></el-table-column>
                    <el-table-column label="当天是否重症" prop="isSerious" width="100">
                        <template v-slot="scope">
                            <el-tag size="mini" type="success" v-show="scope.row.isSerious === '0'">非重症</el-tag>
                            <el-tag size="mini" type="danger" v-show="scope.row.isSerious === '1'">重症</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="当前时间" prop="time" width="180" align="center"></el-table-column>
                    <el-table-column label="病症" prop="symptoms" width="180" align="center"></el-table-column>
                    <el-table-column label="备注" prop="note" align="center"></el-table-column>
                    <el-table-column label="抗原检测信息" prop="ctDetectionInfo" width="180" align="center">
                        <template v-slot="scope">
                            <el-tag size="mini" type="success" v-show="scope.row.ctDetectionInfo === '010'">阴性</el-tag>
                            <el-tag size="mini" type="danger" v-show="scope.row.ctDetectionInfo === '020'">阳性</el-tag>
                            <el-tag size="mini" type="warning" v-show="scope.row.ctDetectionInfo === '030'">待复核</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="核酸检测信息" prop="detectionInfo" width="180" align="center">
                        <template v-slot="scope">
                            <el-tag size="mini" type="success" v-show="scope.row.detectionInfo === '010'">阴性</el-tag>
                            <el-tag size="mini" type="danger" v-show="scope.row.detectionInfo === '020'">阳性</el-tag>
                            <el-tag size="mini" type="warning" v-show="scope.row.detectionInfo === '030'">待复核</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否可出院" prop="isLeave" width="180" align="center">
                        <template v-slot="scope">
                            <el-tag size="mini" type="danger" v-show="scope.row.isLeave === '0'">否</el-tag>
                            <el-tag size="mini" type="success" v-show="scope.row.isLeave === '1'">是</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="100" v-if="showButton">
                        <template v-slot="scope">
                            <el-button size="mini" icon="el-icon-edit" type="text"
                                       @click="handleUpdate(scope.row.id)">修改
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页区 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.current"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                />
            </el-card>
        </div>
        <add-treat-info :id.sync="id" :showAddTreatInfo.sync="showAddTreatInfo"
                        :treatIdInfo.sync="treatIdInfo" :timeInfo.sync="timeInfo"
                        :addButtonShow.sync="addButtonShow"
                        :editButtonShow.sync="editButtonShow"
                        :titleInfo.sync="titleInfo"
                        @showTableInfo="showTableInfo"/>
    </div>
</template>

<script>
import {mapActions} from "vuex";
import AddTreatInfo from '../components/addTreatInfo.vue'

export default {
    name: "treatmentInfo",
    props: {
        showTreatId: {type: Boolean, default: false},
        showButton: {type: Boolean, default: true},
    },
    components: {
        AddTreatInfo,
    },
    mounted() {
        if (this.$route.params.treatId) {
            this.treatId = this.$route.params.treatId;
        }
        // 查询字典值
        // this.init()
        this.handleQuery()
    },
    data() {
        return {
            id: '',
            timeInfo: '',
            treatIdInfo: '',
            titleInfo:'新增患者治疗信息',
            showAddTreatInfo: false,
            addButtonShow: false,
            editButtonShow: false,
            tableData: [],
            page: {
                size: 10,
                current: 1,
                total: 0
            },
            queryInfo: {
                treatId: '',
                time: undefined,
            },
            treatId: '',
        }
    },
    methods: {
        ...mapActions("treatmentInfo", ["treatmentInfoList"]),
        async init() {
            let dicInfo = ['sex', 'countyArea', 'patientState']
            let res = await this.optionListCode(dicInfo)
            this.sexDicInfo = res.sex
            this.areaDicInfo = res.countyArea
            this.patientStateDicInfo = res.patientState
        },
        // 修改
        handleUpdate(id) {
            this.editButtonShow = true
            this.titleInfo = '患者治疗信息修改'
            this.id = id
            this.showAddTreatInfo = true
            this.treatIdInfo = this.treatId
            this.timeInfo = this.getNowTime()
        },
        // 查询角色分页
        async handleQuery() {
            if (this.treatId !== '') {
                this.queryInfo.treatId = this.treatId
            }
            let params = Object.assign(this.page, this.queryInfo)
            let res = await this.treatmentInfoList(params);
            this.tableData = res.data.records;
            this.page.total = res.data.total;
            this.page.size = res.data.size;
            this.page.current = res.data.current;
        },
        //修改每页显示条数
        handleSizeChange(size) {
            this.page.size = size
            this.handleQuery()
        },
        //修改当前第几页
        handleCurrentChange(current) {
            this.page.current = current
            this.handleQuery()
        },
        // 重置查询
        resetQuery() {
            this.$set(this.queryInfo, "time", undefined)
            this.$set(this.queryInfo, "treatId", undefined)
            this.page = {
                current: 1
            }
            this.handleQuery()
        },
        // 添加患者信息
        handleAdd() {
            this.addButtonShow = true
            this.showAddTreatInfo = true
            this.treatIdInfo = this.treatId
            this.timeInfo = this.getNowTime()
        },
        showTableInfo() {
            this.resetQuery()
        },
        // 获取当前时间
        getNowTime() {
            let now = new Date();
            let year = now.getFullYear(); //得到年份
            let month = now.getMonth(); //得到月份
            let date = now.getDate(); //得到日期
            month = month + 1;
            month = month.toString().padStart(2, "0");
            date = date.toString().padStart(2, "0");
            let defaultDate = `${year}-${month}-${date}`;
            return defaultDate;
        },
    },
}
</script>

<style scoped>

</style>
